<script setup>
import PageSection from './PageSection.vue'
import { NewsType, NewsTypeEN } from '~/constants'
import { getNews } from '~/service/news'

defineProps({
  active: Boolean,
})

const { locale } = useLocale()

const { resolveImgURL } = useGlobalStore()

const list = ref([])
onMounted(async () => {
  const data = await getNews()
  list.value = data.list
})

const companyNews = computed(() => list.value?.filter?.(news => news.type === '1') || [])
const industryNews = computed(() => list.value?.filter?.(news => news.type === '2') || [])

const currentCompanyNewsIndex = ref(0)
const currentCompanyNews = computed(() => companyNews.value?.[currentCompanyNewsIndex.value])

const d = computed(() => {
  if (!currentCompanyNews.value?.publish_date)
    return {}
  const d = new Date(currentCompanyNews.value.publish_date)
  return {
    day: d.getDate(),
    date: `${d.getFullYear()}-${d.getMonth() + 1}`,
  }
})

function prev() {
  if (currentCompanyNewsIndex.value <= 0)
    return

  currentCompanyNewsIndex.value = (currentCompanyNewsIndex.value - 1)
}
function next() {
  if (currentCompanyNewsIndex.value >= companyNews.value.length - 1)
    return

  currentCompanyNewsIndex.value = (currentCompanyNewsIndex.value + 1)
}
</script>

<template>
  <PageSection :active :title="$t('menu.news')" title-en="News" relative max-md:h-auto more-path="/news">
    <div v-show="active" pl="[200px] max-md:0" mt="[48px] max-md:[30px]">
      <!-- PC -->
      <div max-md:hidden p="b-[24px]" border="b-[1px] b-solid b-[#f1f1f1]" flex="~" class="items-start">
        <img class="mr-[48px] h-[218px] w-[390px] animate-fade-in home-animate" :src="resolveImgURL(currentCompanyNews?.cover_url)" alt="">
        <div class="animate-fade-in home-animate" flex="shrink-0" m="r-[32px]" p="x-[18px] y-[2px]" bg="[#0083ff19]" text="center [var(--color-text-primary)]">
          <div text="[42px]">
            {{ d?.day }}
          </div>
          <div text="[18px]">
            {{ d?.date }}
          </div>
        </div>
        <div class="animate-fade-in-right home-animate" flex="1">
          <h4 m="b-[24px]" text="[24px]">
            <NuxtLink v-if="currentCompanyNews" :to="`/news/news?id=${currentCompanyNews?.id}`">
              {{ get(currentCompanyNews, 'title', locale) }}
            </NuxtLink>
          </h4>
          <p m="b-[32px]" class="opacity-60" text="[18px]">
            {{ get(currentCompanyNews, 'abstract', locale) }}
          </p>
          <div class="opacity-40" text="[16px]">
            {{ locale === 'zh' ? NewsType[currentCompanyNews?.type] : NewsTypeEN[currentCompanyNews?.type] }}
          </div>
          <div class="flex justify-end" m="t-[16px]">
            <div class="btn mr-[32px] h-[52px] w-[52px] cursor-pointer" @click="prev">
              <img class="h-full w-full" src="~/assets/img/icon_arrow_left_square.png" />
            </div>
            <div class="btn mr-[32px] h-[52px] w-[52px] cursor-pointer" @click="next">
              <img class="h-full w-full" src="~/assets/img/icon_arrow_right_square.png" />
            </div>
          </div>
        </div>
      </div>
      <!-- Mobile -->
      <div hidden max-md:block>
        <img class="w-full animate-fade-in-left max-md:h-[222px] home-animate" m="max-md:b-[12px]" :src="resolveImgURL(currentCompanyNews?.cover_url)" alt="">
        <div class="flex animate-fade-in-right items-center home-animate" m="max-md:b-[12px]">
          <div flex="shrink-0" m="max-md:r-[22px]" p="max-md:x-[12px] max-md:y-[2px]" bg="[#0083ff19]" text="center [var(--color-text-primary)]">
            <div text="max-md:[24px]">
              {{ d?.day }}
            </div>
            <div text="max-md:[14px]">
              {{ d?.date }}
            </div>
          </div>
          <h4 flex="1" text="max-md:[20px]">
            <NuxtLink v-if="currentCompanyNews" :to="`/news/news?id=${currentCompanyNews?.id}`">
              {{ get(currentCompanyNews, 'title', locale) }}
            </NuxtLink>
          </h4>
        </div>
        <p
          m="max-md:b-[12px]"
          :style="{ textOverflow: 'ellipsis' }"
          class="max-md:overflow-ellipsis animate-fade-in-up opacity-60 max-md:w-full home-animate max-md:overflow-hidden max-md:whitespace-nowrap" text="max-md:[16px]"
        >
          {{ get(currentCompanyNews, 'abstract', locale) }}
        </p>
        <div class="flex animate-fade-in-up items-center justify-between home-animate">
          <div class="opacity-40" text="max-md:[16px]">
            {{ locale === 'zh' ? NewsType[currentCompanyNews?.type] : NewsTypeEN[currentCompanyNews?.type] }}
          </div>
          <div class="flex justify-end">
            <div class="btn max-md:ml-[16px] max-md:mr-0 max-md:h-[40px] max-md:w-[40px]" @click="prev">
              <img src="~/assets/img/icon_arrow_left_square.png" class="h-full w-full" />
            </div>
            <div class="btn max-md:ml-[16px] max-md:mr-0 max-md:h-[40px] max-md:w-[40px]" @click="next">
              <img src="~/assets/img/icon_arrow_right_square.png" class="h-full w-full" />
            </div>
          </div>
        </div>
      </div>
      <div m="t-[32px] max-md:t-[12px] max-md:b-[24px]" grid="~ cols-2 max-md:cols-1 gap-x-[48px] gap-y-[32px] max-md:gap-0">
        <!-- PC -->
        <div
          v-for="news in industryNews"
          :key="news.id"
          class="animate-fade-in-up home-animate"
          max-md:hidden
          flex="~ 1" justify="between"
          border="b-[1px] solid [#f1f1f1] max-md:b-0 max-md:last:b-[1px] max-md:t-[1px] "
          p="b-[24px] max-md:y-[12px]" text="[16px]"
        >
          <div>
            <h5 text="[18px] max-md:[16px]">
              <NuxtLink :to="`/news/news?id=${news?.id}`">
                {{ get(news, 'title', locale) }}
              </NuxtLink>
            </h5>
            <div text="[#1f1f1f66] max-md:[16px]">
              {{ locale === 'zh' ? NewsType[news.type] : NewsTypeEN[news.type] }}
            </div>
          </div>
          <div flex="shrink-0" text="[#A1A1A1] max-md:[14px]">
            {{ news.publish_date }}
          </div>
        </div>
        <!-- Mobile -->
        <div
          v-for="news in industryNews"
          :key="news.id"
          hidden
          max-md:flex
          flex="1" justify="between"
          border="b-[1px] solid [#f1f1f1] max-md:b-0 max-md:last:b-[1px] max-md:t-[1px] "
          p="b-[24px] max-md:y-[12px]" text="[16px]"
          class="animate-fade-in-up home-animate"
        >
          <div>
            <h5 text="[18px] max-md:[16px]">
              <NuxtLink v-if="industryNews[0]" :to="`/news/news?id=${industryNews[0]?.id}`">
                {{ get(news, 'title', locale) }}
              </NuxtLink>
            </h5>
            <div text="[#1f1f1f66] max-md:[16px]">
              {{ locale === 'zh' ? NewsType[news.type] : NewsTypeEN[news.type] }}
            </div>
          </div>
          <div flex="shrink-0" text="[#A1A1A1] max-md:[14px]">
            {{ news.publish_date }}
          </div>
        </div>
      </div>
    </div>
  </PageSection>
</template>

<style scoped lang="postcss">
.btn {
  @apply bg-[#0000000a] flex items-center justify-center opacity-60;
}
</style>
